<div class="row">
  <div class="col-md-3">
    <div
      class="card"
      mwlDroppable
      (drop)="externalDrop($event.dropData.event)"
      dragOverClass="drag-over"
    >
      <div class="card-body">
        @if (externalEvents.length === 0) {
        <p><em>No events added</em></p>
        }
        <ul>
          @for (event of externalEvents; track event) {
          <li
            mwlDraggable
            [dropData]="{event: event}"
            [touchStartLongPress]="{ delay: 300, delta: 30 }"
            dragActiveClass="drag-active"
          >
            <a href="javascript:;" [style.color]="event.color.primary">
              {{ event.title }}
            </a>
          </li>
          }
        </ul>
      </div>
    </div>
  </div>

  <div class="col-md-9">
    <mwl-demo-utils-calendar-header [(view)]="view" [(viewDate)]="viewDate" />

    <div>
      @switch (view) { @case (CalendarView.Month) {
      <mwl-calendar-month-view
        [viewDate]="viewDate"
        [events]="events"
        [activeDayIsOpen]="activeDayIsOpen"
        [refresh]="refresh"
        (eventTimesChanged)="eventDropped($event)"
      />
      } @case (CalendarView.Week) {
      <mwl-calendar-week-view
        [viewDate]="viewDate"
        [events]="events"
        [refresh]="refresh"
        [snapDraggedEvents]="false"
        (eventTimesChanged)="eventDropped($event)"
      />
      } @case (CalendarView.Day) {
      <mwl-calendar-day-view
        [viewDate]="viewDate"
        [events]="events"
        [refresh]="refresh"
        [snapDraggedEvents]="false"
        (eventTimesChanged)="eventDropped($event)"
      />
      } }
    </div>
  </div>
</div>
